<template>
    <div class="main-content" style="padding-top: 5px !important;">
        <el-tabs v-model="projectId" @tab-click="handleClick">
            <el-tab-pane
            v-for="item in projectList"
            :key="item.id"
            :label="item.name"
             :name="item.id">

            </el-tab-pane>

        </el-tabs>
        <section class="data-type">
            <div   :class="[dataType === 1 ? 'active' : '', 'tab-button']" @click="changeDataType(1)">管井数据</div>
            <div   :class="[dataType === 2 ? 'active' : '', 'tab-button']" @click="changeDataType(2)">管线数据</div>
        </section>
        <PipelLine v-if="dataType ==2" ref="pipelLineRef" :dataType="dataType" :statusList="statusList"></PipelLine>
        <PipelPoint v-if="dataType ==1" ref="PipelPointRef" :dataType="dataType" :statusList="statusList"></PipelPoint>

    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, nextTick, computed, watch } from 'vue';

import { Search, Plus, CircleCheckFilled, MessageBox, Message } from '@element-plus/icons-vue';
import { validateForm } from '@/helper/index';
import {getObsConfig, getPipelineData, getPipelineDetail, getRoadList, userList, createPipeline, batchUpadatePipeline, getLoginUserProjects, getUserDataStatus, getStatusActionMaps, pipelineProcess,getCombDetail} from '@/api/index';
import PipelLine from './pipelLine.vue';
import PipelPoint from './pipelPoint.vue';

const projectId = ref(null);
const pipelLineRef = ref(null);
const PipelPointRef = ref(null);
const dataType = ref(1);


const changeDataType = async (val) => {
    dataType.value = val;
    await nextTick();
    setTimeout(() => {
        if(dataType.value == 1) {
            PipelPointRef.value.searchForm.projectId = projectId.value;
            PipelPointRef.value.searchForm.status = statusList.value[0].status;
            PipelPointRef.value.getRoad();
            PipelPointRef.value.getList();
            PipelPointRef.value.setTable();


        } else {
            pipelLineRef.value.searchForm.projectId = projectId.value;
            pipelLineRef.value.searchForm.status = statusList.value[0].status;
            pipelLineRef.value.getRoad();
            pipelLineRef.value.getList();
            pipelLineRef.value.setTable();

        }
    }, 500);

};
const projectList= ref([]);
const getProject = async () => {
    const list = await getLoginUserProjects();
    projectList.value = list;
    projectId.value = projectList.value[0].id;

    if(dataType.value == 1) {
        PipelPointRef.value.searchForm.projectId = projectList.value[0].id;
    } else {
        pipelLineRef.value.searchForm.projectId = projectList.value[0].id;
    }

};
const handleClick = e => {
    setTimeout(() => {
        if(dataType.value == 1) {
            PipelPointRef.value.searchForm.projectId = projectId.value;
            PipelPointRef.value.tabClick();
        } else {
            pipelLineRef.value.searchForm.projectId = projectId.value;
            pipelLineRef.value.tabClick();
        }
    },200);
};

const statusList= ref([]);
const getStatus = async () => {
    statusList.value = await getUserDataStatus();

    if(dataType.value == 1) {
        PipelPointRef.value.searchForm.status = statusList.value[0].status;
    } else {
        pipelLineRef.value.searchForm.status = statusList.value[0].status;

    }
};


const init = async () => {
    try {
        await getProject();
        await getStatus();
        await nextTick();
        if(dataType.value == 1) {
            PipelPointRef.value.getRoad();
        } else {
            pipelLineRef.value.getRoad();
        }
    } finally {
        if(dataType.value == 1) {
            PipelPointRef.value.getList();
        } else {
            pipelLineRef.value.getList();
        }
    }


};
init();

</script>

<style scoped lang="scss">
.details{
    display: flex;
    align-items: center;
    flex-flow: wrap;
    .details-item{

        margin-top: 10px;
        width: 50%;

    }
}
.uploader{
    width: 100%;
    display: flex;
    align-items: center;
    .btns{
        padding: 0 10px;
        margin-right: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color:#1B1B1E;
        height: 32px;
        border: 1px solid #DCDCDC;
        border-radius: 3px;
        flex: 1;
        &.empty{
            color:#91949F
        }
        .el-icon{
            color:#2EB68D;
        }
    }
}
.main-content > .btns{
    margin:10px 0 20px;
}
.search-form{
   ::v-deep(){
    .el-input,.el-select{
        width: 265px !important;
    }
   }
}
.data-type {
    padding: 5px 0 20px;
    display: flex;
    .tab-button{
        cursor: pointer;
        padding: 8px 15px;
        background: #E4E5EA;
        border-radius: 3px;
        &.active{
            color: #4371EE;
            background: #D9E3FC;
        }
        & + .tab-button{
            margin-left: 20px;
        }
    }
}
::v-deep(.el-popper){
    max-width: 400px;
}
</style>

